<template>
    <div class="notify" v-if="msg" :style="{backgroundColor:this.bgColor,color:this.color}" >
        {{msg}}
    </div>
</template>

<script>
export default{
    data(){
        return{
            msg:"",
            bgColor:"#090",
            color:"#fff",
        }
    },
    methods:{
        show(str="通知信息",bgColor="#090",color="#fff"){
            this.msg=str;
            this.bgColor=bgColor;
            this.color=color;
            setTimeout(()=>{
                this.hide();
            },2000);
        },
        hide(){
            this.msg="";
        },
        //成功
        success(msg){
            this.show(msg,"#090");
        },
        //失败
        danger(msg){
            this.show(msg,"#ff5500");
        },
        //警告
        warning(msg){
            this.show(msg,"#ffd606");
        }
    }
}
</script>

<style>
.notify{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    padding: .4rem 0;
    color: #fff;
    text-align: center;
    border-radius: 0 0 10px 10px;
}
</style>